import React from 'react';
import { Link } from 'react-router-dom';
import Helmet from 'react-helmet'

import { Tabs, Icon, Row, Col } from 'antd';
import MobileHeder from './mobile_header';
import MobileList from './mobile_list';
import MobileFooter from './mobile_footer';

const MobileIndex = () => {
  const { TabPane } = Tabs;
  const channel = [
    '头条',
    '新闻',
    '财经',
    '体育',
    '娱乐',
    '军事',
    '教育',
    '科技',
    'NBA',
    '股票',
    '星座',
    '女性',
    '健康',
    '育儿',
  ];
  const linkStyle = { display: 'inline-block' }
  return (
    <div id="mobile">
      <MobileHeder />
      <Helmet>
        <title>小白新闻</title>
      </Helmet>
      <div className="mobile-body">
        <Tabs defaultActiveKey="1">
          <TabPane key="1" tab="头条">
            <MobileList type="top" count="15" channel="头条" />
          </TabPane>
          <TabPane key="2" tab="新闻">
            <MobileList type="top" count="15" channel="新闻" />
          </TabPane>
          <TabPane key="3" tab="财经">
            <MobileList type="top" count="15" channel="财经" />
          </TabPane>
          <TabPane key="4" tab="体育">
            <MobileList type="top" count="15" channel="体育" />
          </TabPane>
          <TabPane key="5" tab="娱乐">
            <MobileList type="top" count="15" channel="娱乐" />
          </TabPane>
          <TabPane key="6" tab="更多>>">
            <Row>
              { channel.map(item => (
                <Col span={8} key={item}>
                  <Link to={`/list/${encodeURIComponent(item)}`} style={linkStyle} className="mobile-more"><Icon type="appstore" />{item}</Link>
                </Col>))
              }
            </Row>
          </TabPane>
        </Tabs>
      </div>
      <MobileFooter />
    </div>
  )
}
export default MobileIndex
